﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="script_example_04.aspx.cs"
    MasterPageFile="~/main.master" EnableViewState="false" Inherits="sdk_category_script_example_04" %>

<%@ Register Src="../../modules/categories_v2.ascx" TagName="categories" TagPrefix="uc1" %>
<asp:Content ID="hd" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" type="text/css" href="../style.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Generate Jquery Horizontal Menu - ASP.NET Category Script 2.0 </title>
</asp:Content>
<asp:Content ID="pagecontent" ContentPlaceHolderID="MC" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {

            $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  

            $("ul.topnav li span").click(function () { //When trigger is clicked...  

                //Following events are applied to the subnav itself (moving subnav up and down)  
                $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  

                $(this).parent().hover(function () {
                }, function () {
                    $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
                });

                //Following events are applied to the trigger (Hover events for the trigger)  
            }).hover(function () {
                $(this).addClass("subhover"); //On hover over, add class "subhover"  
            }, function () {  //On Hover Out  
                $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
            });

        });  
    </script>
    <div id="msg" runat="server">
    </div>
    <div class="main_block ui-corner-all">
        <div class="item">
            <div class="item">
                <div class="module ui-corner-all">
                    <a id="hm" class="bld" runat="server"></a>&nbsp;&gt;&nbsp;<a id="sdk" class="bld"
                        runat="server"></a>&nbsp;&gt;&nbsp;<a id="vd" class="bld" runat="server"></a>&nbsp;&gt;&nbsp;Generate
                    Jquery Horizontal Menu
                </div>
            </div>
            <div class="item_pad">
                <div class="module ui-corner-all">
                    <div class="heading">
                        <h3 id="cmt" runat="server">
                            Generate Jquery Horizontal Menu
                        </h3>
                    </div>
                    <div class="pd_5 ptext">
                        <p class="bgtext">
                            This example will load parent / child category listing data from database and will
                            generate jquery horizontal menu.
                        </p>
                    </div>
                </div>
            </div>
             <div class="item_pad">
                <div id="cnav02" class="module ui-corner-all">
                    <uc1:categories ID="Categories1" runat="server" />
                </div>
            </div>
            <div class="item_pad">
                <div class="module ui-corner-all">
                    <div class="heading">
                        <h3>
                            Examples &amp; Codes (Show All Categories, Parents / Childs)
                        </h3>
                    </div>
                    <div class="pd_5 ptext">
                        <div class="cscroll">
<pre class="csharpcode">
<span class="rem">// Code Behind</span>
<span class="kwrd">if</span> (Categories1 != <span class="kwrd">null</span>)
{
   Categories1.HeadingTitle = <span class="str">"Category Navigation"</span>;
   Categories1.Type = 13; <span class="rem">// Category Type (13: Classified)</span>
   Categories1.MainCategoryURL = <span class="kwrd">false</span>;
   Categories1.ShowParentsOnly = <span class="kwrd">false</span>;
   Categories1.MoreLinkText = <span class="str">"see all"</span>;
   Categories1.MoreLinkToolTip = <span class="str">"Browse all categories"</span>;
   Categories1.MoreLinkUrl = <span class="str">"categories/"</span>;
   Categories1.NavigationCssClass = <span class="str">""</span>; <span class="rem">// clear css style</span>
   Categories1.ListingCssClass = <span class="str">""</span>;
   Categories1.isHeading = <span class="kwrd">false</span>;
   Categories1.isAll = <span class="kwrd">true</span>;
   Categories1.isMainNavigation = <span class="kwrd">true</span>;
   Categories1.UlParentCssClass = <span class="str">"topnav"</span>; <span class="rem">// css apply on main ul element</span>
   Categories1.UlChildCssClass = <span class="str">"subnav"</span>; <span class="rem">// css apply on sub ul element</span>
}</pre>
                        </div>
                    </div>
                    <div class="pd_5 ptext">
                        <p>
                            Css Style Sheet used in this example
                        </p>
                    </div>
                    <div class="cscroll">
                        <pre class="csharpcode">
#cnav02 ul.topnav {list-style: none; padding: 0 20px; margin: 0; float: left; width: 920px; background: #222; font-size: 1.2em; background: url(topnav_bg.gif) repeat-x; }  
#cnav02 ul.topnav li {  float: left; margin: 0;  padding: 0 15px 0 0;  position: relative; /*--Declare X and Y axis base for sub navigation--*/ }  
#cnav02 ul.topnav li a{padding: 10px 5px; color: #fff; display: block;  text-decoration: none;  float: left; }  
#cnav02 ul.topnav li a:hover{ background: url(topnav_hover.gif) no-repeat center top; }  
#cnav02 ul.topnav li span { /*--Drop down trigger styles--*/width: 17px;height: 35px;float: left;background: url(subnav_btn.gif) no-repeat center top;}  
#cnav02 ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/ 
#cnav02 ul.topnav li ul.subnav {list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/left: 0; top: 35px;background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; border: 1px solid #111; }  
#cnav02 ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/  border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both;  width: 170px;}  
#cnav02 html ul.topnav li ul.subnav li a {float: left;  width: 145px;  background: #333 url(dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; }  
#cnav02 html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/  background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;  }  
</pre>
                    </div>
                </div>
            </div>
           
            <div class="item_pad">
                <div class="module ui-corner-all">
                    <!-- AddThis Button BEGIN -->
                    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                        <a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2">
                        </a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4">
                        </a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style">
                        </a>
                    </div>
                    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=mediasoftpro"></script>
                    <!-- AddThis Button END -->
                </div>
            </div>
        </div>
    </div>
</asp:Content>
